<template>
	<div class="store_login">
		<main>
			<img src="@/assets/img/logo.png" />
			<div class="inputs">
				<div>
					<img src="@/assets/img/user.png" />
					<van-field v-model="state.form.username" placeholder="请输入账号" />
				</div>
				<div>
					<img src="@/assets/img/password.png" />
					<van-field v-model="state.form.password" placeholder="请输入密码" />
				</div>
			</div>
			<van-button class="submit" size="large" v-debounce="submit">登录</van-button>
		</main>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useMainStore } from '@/store/index';
import { loginStore } from '@/api/my';
import { Toast } from 'vant';
import type { ToastOptions } from 'vant';

import router from '@/router';

const mainStore = useMainStore();
const state = reactive({
	form: {
		user_id: mainStore.user_id,
		username: '',
		password: ''
	}
});

const submit = async (): Promise<void | ToastOptions> => {
	if (!state.form.username.trim()) return Toast('请输入账号');
	if (!state.form.password.trim()) return Toast('请输入密码');
	const res = await loginStore(state.form);
	Toast.success('登录成功');
	mainStore.storeIsLogin = true;
  mainStore.storeInfo = res.data
	router.go(-1);
};
</script>

<style lang="scss" scoped>
.store_login {
	min-height: 100vh;
	box-sizing: border-box;
	padding: 50px 30px;
	background: #f5f5f5;
	main {
		@include flx-direction-center;
		& > img {
			width: 120px;
			height: 120px;
			margin-bottom: 50px;
		}
		:deep(.inputs) {
			width: 100%;
			& > div {
				@include flx-align-center;
				width: 100%;
				height: 60px;
				margin-bottom: 30px;
				box-sizing: border-box;
				padding: 0 25px;
				border-radius: 50px;
				background: white;
				input {
					color: #cccccc;
				}
				img {
					width: 20px;
					height: 20px;
				}
			}
		}
		.submit {
			height: 50px;
			margin: 40px 0;
			background: linear-gradient(98deg, #fb56b3, #f53d7d);
			border-radius: 50px;
			font-size: 16px;
			color: #ffffff;
		}
	}
}
</style>
